<template>
  <div class="imageDiv" >
    <div class="imageBg" @click="cancel"></div>
    <div class="imageBox" >
      <div class="imgBox"><img :src="imgUrl"></div>
      <div class="cancelBtn" @click="cancel"><img src="/static/images/goods/createdimgcancel.png"></div>
      <div class="saveImg" @click="getSetting" >保存图片</div>
    </div>
    <!-- 授权框 -->
    <div class="shouquan" v-if="isShowOpen">
      <div class="imageBg" @click="cancelAuthorize"></div>
      <div class="authorizeAlert">
        <p>需要同意将分享图片保存到相册，点击确定后跳转至设置页操作</p>
        <div class="authorizeBtn">
          <div @click="cancelAuthorize">取消</div>
          <button class="button" open-type="openSetting" @opensetting="getSetting" >确定</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props:{
      imgUrl: {
        type: String
      },
    },
    data(){
      return{
        isShowOpen: false
      }
    },
    mounted() {
      if (!wx.saveImageToPhotosAlbum) { //判断此功能是否兼容低版本
        wx.showModal({  
          title: '提示',  
          content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'  
        })  
        return;  
      }  
    },
    methods:{
      cancelAuthorize(){//取消授权
        this.isShowOpen = false
      },
      cancel(){
        this.$emit("cancel")
      },
      getSetting(){ //去授权
        let that = this
        wx.getSetting({ //判断是否授权
          success: (res) =>{
            if (!res.authSetting['scope.writePhotosAlbum']) { 
              wx.authorize({// 接口调用询问  
                scope:'scope.writePhotosAlbum',
                success() {
                  that.showToast('授权成功')
                  that.saveImage()
                },
                fail(){ //用户拒绝了授权
                  //that.showToast('该功能需要授权')
                  // 打开设置页面  
                  that.isShowOpen = true
                }
              })

            }else{
              //that.showToast('用户已经授权过了')
              that.saveImage()
            }
          },
          fail(res){
            that.showToast('getSetting: success') 
            console.log(res); 
          }
        })
      },
      saveImage(){  //这是下载图片并且保存图片到系统相册
        let that = this
        wx.downloadFile({ //下载文件
          url: that.imgUrl,  
          success: function (res) {     
            let path = res.tempFilePath
            wx.saveImageToPhotosAlbum({  // 保存图片到系统相册   
              filePath: path,  
              success(res) {  
                console.log(res) 
                that.cancel()
                that.showToast("保存成功")  
              },  
              fail(err) {
                if (err.errMsg == "saveImageToPhotosAlbum:fail auth deny" || err.errMsg == "saveImageToPhotosAlbum:fail:auth denied") {
                  that.isShowOpen = true
                }
              },  
            })  
          },  
          fail (res) {  
            that.showToast("下载文件：fail")  
            console.log(res);  
          }  
        })  
      }, 
      // 微信提示方法
      showToast (title) {
        wx.showToast({
          title: title,
          duration: 2000,
        });
      },
    }
  }
</script>

<style scoped>
img{
  display: block;
  width: 100%;
  height: 100%;
}
.imageDiv{
  position: fixed;
  width: 100%;
  height: auto;
  z-index: 3;
  top: 0;
  bottom:0;
  position:fixed;
  overflow-y:scroll;
  overflow-x:hidden
}
.imageBg{
  background: #000;
  opacity: 0.5;
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  height: 100%;
}
.imageBox{
  position: relative;
  z-index: 2;
  width: 570rpx;
  height: auto;
  margin: 40rpx auto 0;
}
.imageBox .imgBox{
  width: 570rpx;
  height: 1014rpx;
  margin: 0 auto;
}
.imageBox .cancelBtn{
  position: absolute;
  top: -34rpx;
  right: -34rpx;
  width: 68rpx;
  height: 68rpx;
  z-index: 4;
}
.saveImg{
  position: relative;
  z-index: 2;
  margin-top: 45rpx;
  margin-bottom: 20rpx;
  background:rgba(170,209,214,1);
  width: 570rpx;
  height: 88rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  color: #fff;
}
.shouquan{
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 3;
}
.shouquan .imageBg{
  z-index: 3;
}
.shouquan .authorizeAlert{
  position: absolute;
  z-index: 3;
  width: 570rpx;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  background: #fff;
  font-size: 30rpx;
  color: #000;
  word-break: break-all;
  padding: 50rpx 35rpx 40rpx;
  box-sizing: border-box;
}
.shouquan .authorizeAlert .authorizeBtn{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 20rpx;
}
.shouquan .authorizeAlert .authorizeBtn button{
  line-height: 40rpx;
  background: #fff;
  font-size: 30rpx;
  color: #000;
  padding: 0;
  display: inline-block;
  margin: 0 0 0 50rpx;
  color: #38bc18;
}
button::after{
  border: 0;
}
</style>
